<template>
  <view class="wanlshop-category-container">
    <view class="fp-container fp-top" style="border-radius: 20rpx">
      <uni-section title="配置左侧标题" type="line">
      <uni-data-select
        v-model="invoice"
        :localdata="range"
        @change="change"
        label="应用选择"
      ></uni-data-select>
    </uni-section>
    </view>

    <view class="example">
      <view class="example-switch">
        <view>抬头类型</view>
        <view>
          <radio-group
            style="display: flex; align-items: center"
            :class="checked == 1 ? 'shake-horizontal' : ''"
            class="auth-clause"
            @change="billingType"
          >
            <radio value="1" />&nbsp&nbsp个人
            <br/>
            <radio value="2" style="margin-left:20rpx;"/>&nbsp&nbsp企业
          </radio-group>
        </view>
      </view>
      <!-- 自定义表单校验 -->
      <uni-forms
        ref="customForm"
        :rules="customRules"
        :modelValue="form"
        label-width="100px"
        class="cusForm"
        label-align="left"
        v-if="personal"
      >
        <uni-forms-item label="发票抬头" required name="title">
          <uni-easyinput
            v-model="form.title"
            placeholder="请填写需要开具发票的企业抬头"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
            placeholder-style="text-align: right;"
          />
        </uni-forms-item>
        <uni-forms-item label="税号" required name="tax_id_no">
          <uni-easyinput
            v-model="form.tax_id_no"
            placeholder="纳税人识别号"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>
        <uni-forms-item label="电子邮箱" required name="email">
          <uni-easyinput
            v-model="form.email"
            placeholder="请填写接收发票的电子邮箱"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>

        <uni-forms-item label="开户银行">
          <uni-easyinput
            v-model="form.bank"
            placeholder="选填"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>
        <uni-forms-item label="银行账号">
          <uni-easyinput
            v-model="form.bank_account"
            placeholder="选填"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>
        <uni-forms-item label="企业地址">
          <uni-easyinput
            v-model="form.registered_address"
            placeholder="选填"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>
        <uni-forms-item label="企业电话">
          <uni-easyinput
            v-model="form.registered_phone"
            placeholder="选填"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>
      </uni-forms>


      <uni-forms
        ref="customForm"
        :rules="customRules"
        :modelValue="form"
        label-width="100px"
        class="cusForm"
        label-align="left"
        v-if="!personal"
      >
        <uni-forms-item label="发票抬头" required name="title">
          <uni-easyinput
            v-model="form.title"
            placeholder="请填写需要开具发票的企业抬头"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
            placeholder-style="text-align: right;"
          />
        </uni-forms-item>
       
        <uni-forms-item label="电子邮箱" required name="email">
          <uni-easyinput
            v-model="form.email"
            placeholder="请填写接收发票的电子邮箱"
            :inputBorder="false"
            :input-style="{ textAlign: 'right' }"
          />
        </uni-forms-item>
      </uni-forms>
    </view>

    <checkbox-group
      style="
        margin: 20px auto 20px auto;
        display: flex;
        width: 86%;
        align-items: center;
      "
      :class="checked == 1 ? 'shake-horizontal' : ''"
      class="auth-clause"
      @change="CheckboxChange"
    >
      <checkbox
        :class="checked == 2 ? 'checked' : ''"
        :checked="checked == 2 ? true : false"
        value="2"
      />
      <view class="text-right" style="margin-left: 4px">
        我已阅读并同意
        <!-- <text
          style="color: #ff8833"
          @tap="
            onDetails(
              $store.state.common.appConfig.privacy_protection,
              '隐私保护'
            )
          "
          >《隐私权政策》</text
        > -->
        <text
          style="color: red; margin-left: 4px"
          @tap="
            onDetails($store.state.common.appConfig.user_agreement, '用户协议')
          "
          >增值税专用发票抬头确认书</text
        >
      </view>
    </checkbox-group>

    <button type="primary" @click="submit('customForm')" class="FormButton">
      提交
    </button>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      personal: true,
      checked: "",
      invoice: "",
      form: {
        title: "",
        tax_id_no: "",
        email: "",
        bank: "",
        bank_account: "",
        registered_address: "",
        registered_phone: "",
      },
       range: [
          { value: 'digital_general', text: "普通发票" },
          { value: 'digital_special', text: "普通专票" },
      ],
      customRules: {
        Rise: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年龄",
            },
          ],
        },
        tax_id_no: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年龄",
            },
          ],
        },
        email: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年龄",
            },
          ],
        },
      },
    };
  },
  computed: {
    ...mapState(["common", "cart"]),
    appStyle() {
      let style = this.common.appStyle;
      // uni.setNavigationBarColor({
      // 	backgroundColor: style.home_nav_color
      // });
      return style;
    },
  },
  onLoad(options) {
    // this.datas = JSON.parse(options.datas)
    // this.shop_id = options.shop_id
    // console.log(datas,shop_id,'onLoad')
  },
  methods: {
    change(e) {
      console.log(e,'change')
    },
    billingType (e) {
       console.log(e,'Type')
      // personal
      this.personal = !this.personal
    },
    CheckboxChange(e) {
      this.checked = e.detail.value;
    },
    submit() {
      let storedUserInfo = uni.getStorageSync('order_info');
      let is_order_list = uni.getStorageSync('is_order_list');
      is_order_list = JSON.parse(is_order_list)
      storedUserInfo = JSON.parse(storedUserInfo)

      // is_order_list
      // console.log(storedUserInfo,'storedUserInfo')
      // return

      this.$refs.customForm
        .validate()
        .then((res) => {
          console.log("表单数据信息：", this.form, res);

          this.$api.post({
            url: "/wanlshop/invoice/apply",
            data: {
              order_id_list: is_order_list,
              shop_id: storedUserInfo.shop_id,
              type: this.invoice,
              title_type: this.personal ? 'personal' : 'company',
              title: this.form.title,
              email: this.form.email,
              tax_id_no: this.form.tax_id_no,
              registered_address: this.form.registered_address,
              registered_phone: this.form.registered_phone,
              bank: this.form.bank,
              bank_account: this.form.bank_account,
              remarks: this.form.remarks,
            },
            success: (res) => {

            
            },
          });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>

<style>
page {
  background-color: #f6efe9;
}

/* 隐藏uni-easyinput中的文本框 */
.uni-easyinput__inner {
  border: none; /* 去掉边框 */
  background-color: transparent; /* 背景透明 */
  outline: none; /* 去掉焦点时的轮廓 */
}

/* 可以通过自定义类来设置更多样式 */
.uni-forms-item--border {
  border: 1px solid red; /* 设置边框为1px的灰色 */
}
</style>

<style lang="scss" scoped>
.cusForm {
  border-radius: 30px;
}

.wanlshop-category-container {
  background-color: var(--bg);
}
.navigator {
  box-sizing: border-box;
  /* #ifdef MP */
  padding-right: 220rpx;
  /* #endif */
}

.cu-custom .cu-bar {
  z-index: 99;
}

.cu-bar .action {
  position: relative;
}

/* #ifdef MP */
.cu-bar .search-form {
  margin: 0 0 0 25rpx;
}

/* #endif */

.currentInvoicing {
  // display: flex;
  width: 92%;
  padding: 0 15px;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx auto 0 auto;
}

.currentHeader {
  padding-top: 24rpx;
}

.fp-top {
  margin: 20rpx auto 0 auto;
}

.fp-container {
  display: flex;
  justify-items: center;
  justify-content: space-between;
  height: 80rpx;
  line-height: 80rpx;
  width: 92%;
  padding: 0 15px;
  background-color: #fff;
}

.example-switch {
  display: flex;
  justify-items: center;
  justify-content: space-between;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 20rpx;
  border-bottom: 1px solid #e5e5e5;
}

.example {
  margin: 0rpx auto 0 auto;
  width: 92%;
  padding: 0 15px;
  background-color: #fff;
  border-radius: 20rpx;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}

.FormButton {
  width: 710rpx;
  height: 80prx;
  border-radius: 756rpx;
  background: #fd7601 !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 50px;
}

uni-checkbox.checked ::v-deep .uni-checkbox-input {
  border-radius: 50% !important;
}

uni-checkbox.checked ::v-deep .uni-checkbox-input-checked {
  background-color: #ff8833 !important;
  border-color: #ff8833 !important;
}
wx-checkbox ::v-deep .wx-checkbox-input {
  border-radius: 50% !important;
}

wx-checkbox ::v-deep .wx-checkbox-input-checked {
  background-color: #ff8833 !important;
  border-color: #ff8833 !important;
}

/* 可以通过自定义类来设置更多样式 */
::v-deep .uni-forms-item {
  border-bottom: 1px solid #e5e5e5; /* 设置边框为1px的灰色 */
  margin-bottom: 0px !important;
}

::v-deep .uni-easyinput__content-input {
  text-align: right;
}
</style>

<style>
/* 定义radio的大小 */
.radio-custom {
  width: 30rpx; /* 修改为你想要的大小 */
  height: 30rpx; /* 修改为你想要的大小 */
}
 
/* 对应的外围样式调整 */
.radio-label {
  display: inline-flex;
  align-items: center;
  margin-right: 20rpx;
}
</style>